<template>
  <div class="dialog_video">
    <ul class="list">
      <li v-for="item in sourceList.list" @click="handleSelect(item)">
        <h4 class="title">{{item.name}}</h4>
        <div class="createTime">{{dateFormat(item.createTime)}}</div>
        <img class="cover" :src="item.cover" alt="">
        <div class="time">时长：{{formatTime(item.time)}}</div>
        <div v-if="item.id === sel.id" class="mask"><i class="el-icon-check"></i></div>
      </li>
    </ul>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page.sync="page"
        :page-size.sync="size"
        layout="total, prev, pager, next, jumper"
        :total="sourceList.page.total"
        @current-change="initComponent()">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {mapState, mapActions, mapMutations} from 'vuex'
  export default {
    data () {
      return {
        sel: {},
        page: 1,
        size: 9
      }
    },
    mounted () {
      const that = this
      this.initComponent()
      this.$bus.$on('reloadVideo', function () {
        that.initComponent()
      })
    },
    watch: {
      sel (val) {
        this.SELECT_SOURCE(val)
      }
    },
    computed: {
      ...mapState({
        curDir: state => state.sourceManage.currentDir,
        sourceList: state => state.sourceManage.videoList
      })
    },
    methods: {
      ...mapActions(['getSourceList']),
      ...mapMutations(['SELECT_SOURCE']),
      // 初始化组件
      async initComponent () {
        await this.getSourceList({
          type: 1,
          size: this.size,
          page: this.page
        })
      },
      // 格式化时间
      formatTime (t) {
        let time = t
        return this.$_.padStart(Math.floor(time / 60).toString(), 2, 0) + ':' + this.$_.padStart((time % 60).toString(), 2, 0)
      },
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD hh:mm:ss')
      },
      handleSelect (item) {
        this.sel = item
      }
    }
  }
</script>
<style lang="scss">
  .dialog_video{
    .list{
      &{height:400px;display:flex;flex-wrap:wrap;overflow-y:auto;}
      li{position:relative;margin:0 5px 10px 5px;padding:10px;width:248px;border:1px solid #e7e7eb;cursor:pointer;}
      .cover{width:100%;height:132px;}
      .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
      .mask{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);color:#fff;font-size:30px;text-align:center;line-height:217px;}
    }
  }
</style>
